<template>
  <div id="login" :style="note" >
    <el-card style="width: 600px;height: 400px;margin: 0 auto;
  background-color: rgba(255,255,255,0.6);border: 0;margin-top: 250px">
      <div style="width: 600px;margin: 0 auto;text-align: center;"><h1 style="color: #a89a40">合家物业欢迎您</h1></div>
      <h2 style="width: 600px;margin: 0 auto;text-align: center;color: #a89a40">Welcome to HEJA Propety System</h2>
      <el-form style="width: 400px;margin: 30px auto" label-width="60px">
        <el-form-item label="用户名">
          <el-input type="text" v-model="user.username"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="user.password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item label="类型">
          <template>
            <el-select v-model="value" placeholder="请选择" style="width: 340px">
              <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item v-show="value=='选项1'">
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form-item>

        <el-form-item v-show="value=='选项2'">
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form-item>

        <el-form-item v-show="value=='选项3'">
          <el-button type="primary" @click="login()">登录</el-button>
        </el-form-item>


      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default{
    data: function () {
      return {
        note: {
          backgroundImage: "url(" + require("../../public/loginbackground.png") + ")",
        },
        user: {
          username: "",
          password: "",
          roleId:""
        },
        options: [{
          value: '选项1',
          label: '管理员'
        }, {
          value: '选项2',
          label: '工作人员'
        },
          {
            value: '选项3',
            label: '住户'
          }
        ],
        value: '选项1',
      }
    },
    created: function () {

    },
    methods: {
      login() {
        if (this.value=='选项1'){
          this.user.roleId=1
        }else if(this.value=='选项2'){
          this.user.roleId=2
        }else {
          this.user.roleId=3
        }
        this.axios.post("http://localhost:8080/user/login",this.user).then((response) => {
          let result=response.data
          if (result.state == 200) {
            console.log("后端返回的jwt为"+result.data)
            localStorage.setItem("accessToken",result.data)
            if (this.value=='选项1'){
              location.href="/admin/base/building"
            }else {
              location.href="/user"
            }
          } else {
            this.$message.error(result.message);
          }
        })
      }
    }
  }
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
#login{

  background-size: cover;
  overflow: auto;
  position: absolute;
  left: 0;
  top:0;
  bottom: 0;
  right: 0
}
</style>

